<template>

<div class="container">
    <h3>Love XY Hotel</h3>
    <div class="uname">
        <input  type="text" v-model="username">
    </div>
    <div class="pwd">
        <input  type="password" v-model="password">
    </div>
    <div class="submit">
        <el-button @click="go">登录</el-button>
    </div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import { login } from '@/utils/user';
import {ElMessage } from 'element-plus'
import router from '@/router';
const username = ref('')
const password = ref('')

async function go(){
   const response = await login(username.value,password.value)
   if(response.status =='200'){
       router.push('/home')
       ElMessage.success(response.message)
   }else{
    username.value = ''
    password.value = ''
    ElMessage.error(response.message)
   }
}
</script>

<style scoped>

    .container{
        padding:100px 0;
        margin: 0 auto;
        max-width: 1400px;
    }
    h3{
        font-size: 60px;
        font-weight:bold;
        text-align: center;
        font-style: italic;
        background: linear-gradient(to right,rgb(8, 33, 43),skyblue);
        -webkit-background-clip:text;
        color: transparent;
        margin-bottom: 30px;
    }
    .uname,.pwd,.submit{
        text-align: center;
        margin-bottom: 20px;
    }
    input{
        width: 300px;
        height: 30px;
        margin: 0 auto;
        padding: 10px 10px;
        border-radius: 15px;
        font-size: 20px;
        border: 1px solid skyblue;
        color: rgb(107, 155, 173);
    }
    input:focus{
        outline:none;
    }
    .submit .el-button{
        background-color: lightcyan;
        width: 100px;
        font-size: 20px;
        color: rgb(238, 3, 199);
    }
</style>